<template>
  <div class="app-container">
        <el-button type="success" style="margin-bottom:1%" @click="tableToExcel()">导出工资单</el-button>

    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >
      <el-table-column align="center" label="工号" width="150">
        <template slot-scope="scope">
          {{ scope.row.staffNumber }}
        </template>
      </el-table-column>
      <el-table-column label="姓名" width="150" align="center">
        <template slot-scope="scope">
          {{ scope.row.name }}
        </template>
      </el-table-column>
      <el-table-column label="所属部门" width="110" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.department }}</span>
        </template>
      </el-table-column>
      <el-table-column label="具体说明" >
        <template slot-scope="scope ">
            <span v-for="(item, index) in scope.row.details" :key="index">
                {{ item }}
                <br> 
            </span>
        </template>
      </el-table-column>
      <el-table-column label="发放时间" width="110" align="center">
        <template slot-scope="scope ">
          {{ formatTime(scope.row.payTime,"YYYY-MM") }}
        </template>
      </el-table-column>

      <el-table-column align="center" prop="created_at" label="应发工资(元)" width="200">
        <template slot-scope="scope">
            <i class="el-icon-coin" />
            <span>{{ scope.row.normalSalary }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" prop="created_at" label="实际工资(元)" width="200">
        <template slot-scope="scope">
            <i class="el-icon-coin" />
            <span>{{ scope.row.actualSalary }}</span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { getList } from '@/api/table'
import { getOneSalaryList } from '@/api/table'


export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'gray',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      list: null,
      listLoading: true
    }
  },
  created() {
    this.fetchData();
  },
  methods: {
      tableToExcel(){
          if(this.list==null || this.list=='' || this.list.length==0){
              this.$message.error("没有薪资记录，导出失败！")
              return 
          }
          else if(this.list!=null && this.list!=''){
              // 要导出的json数据
              var jsonData=[]
              for(let i=0;i<this.list.length;i++){
                  const data = {
                      staffNumber:this.list[i].staffNumber,
                      name:this.list[i].name,
                      department:this.list[i].department,
                      payTime:this.list[i].payTime,
                      normalSalary:this.list[i].normalSalary,
                      actualSalary:this.list[i].actualSalary
                  }
                  jsonData.push(data)
              }
                // 列标题，逗号隔开，每一个逗号就是隔开一个单元格
                let str = `工号,姓名,所属部门,工资发放时间,应发工资,实际工资\n`;
                // 增加\t为了不让表格显示科学计数法或者其他格式
                for (let i = 0; i < jsonData.length; i++) {
                    for (const key in jsonData[i]) {
                        str += `${jsonData[i][key] + '\t'},`;
                    }
                    str += '\n';
                }
                // encodeURIComponent解决中文乱码
                const uri = 'data:text/csv;charset=utf-8,\ufeff' + encodeURIComponent(str);
                // 通过创建a标签实现
                const link = document.createElement("a");
                link.href = uri;
                // 对下载的文件命名
                link.download = "工资单.csv";
                link.click();
            }
        },
      formatTime(time, format) {
            return this.$moment(time).utcOffset(8).format(format)
        },
    fetchData() {
      this.listLoading = true
      getOneSalaryList({staffNumber:this.$store.state.user.staffNumber}).then(res => {
        this.list = res.data.data
        this.listLoading = false
      })
    }
  }
}
</script>
